import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:oramemo/common/styles/colors.dart';
import 'package:oramemo/widget/my_button.dart';

import 'custom_recode_logic.dart';
import 'custom_recode_state.dart';

class CustomRecodePage extends StatelessWidget {
  const CustomRecodePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final CustomRecodeLogic logic = Get.put(CustomRecodeLogic());
    final CustomRecodeState state = Get.find<CustomRecodeLogic>().state;

    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios),
          onPressed: () => Get.back(),
        ),
        title: const Text('自定义记录'),
        actions: [
          Padding(
            padding: EdgeInsets.only(right: 18.w),
            child: Center(
              child: SizedBox(
                width: 79.w,
                height: 32.h,
                child: GetBuilder<CustomRecodeLogic>(builder: (logic) {
                  return MyButton(
                    padding: EdgeInsets.zero,
                    onPressed: logic.isEdit
                        ? () => logic.submit()
                        : () => logic.setEdit(),
                    text: logic.isEdit ? '确定' : '选择',
                    backgroundColor: logic.isEdit
                        ? Colours.app_main
                        : Colors.blue.withOpacity(0.5),
                    fontSize: 14.sp,
                    radius: 12.r,
                  );
                }),
              ),
            ),
          ),
        ],
      ),
      body: GetBuilder<CustomRecodeLogic>(
        builder: (logic) {
          return Column(
            children: [
              Container(
                height: 11.h,
                color: Colours.bg_gray,
              ),
              Expanded(
                child: ListView.separated(
                  itemCount: state.list.length,
                  separatorBuilder: (context, index) =>
                      const Divider(height: 1),
                  itemBuilder: (context, index) {
                    final record = state.list[index];
                    return InkWell(
                      onTap: (logic.isEdit)
                          ? () => logic.selectRecord(index)
                          : null,
                      child: Padding(
                        padding: EdgeInsets.symmetric(horizontal: 30.w),
                        child: ListTile(
                          contentPadding: EdgeInsets.zero,
                          leading: Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: 6.w,
                              vertical: 1.h,
                            ),
                            decoration: BoxDecoration(
                              border: Border.all(color: Colors.blue),
                              borderRadius: BorderRadius.circular(8.r),
                            ),
                            child: Text(
                              '双耳',
                              style: TextStyle(
                                  fontSize: 14.sp, color: Colors.blue),
                            ),
                          ),
                          title: Text(record.createTime ?? '--'),
                          trailing: (logic.isEdit ||
                                  state.selectedIndex.value == index)
                              ? Radio<int>(
                                  value: index,
                                  groupValue: state.selectedIndex.value,
                                  onChanged: (value) =>
                                      logic.selectRecord(value!),
                                )
                              : const SizedBox.shrink(),
                        ),
                      ),
                    );
                  },
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}
